/*
 * @Descripttion: 一些表单操作的公共方法
 * @version: V1.0
 * @Author: GW
 * @Date: 2021-09-08 14:30:10
 * @LastEditors: GW
 * @LastEditTime: 2021-12-23 09:35:13
 */
import Draggable from 'vuedraggable';
import Header from '../components/edit/header';
import Edits from "../components/edit/edits";

import Input from "../components/view/input";
import Select from "../components/view/select";
import Radio from "../components/view/radio";
import Texts from "../components/view/text";
import Checkbox from "../components/view/checkbox";
import Date from "../components/view/date"
import Link from "../components/view/link"
import Textarea from "../components/view/textarea"
import Numbers from "../components/view/number"
import Picture from "../components/view/picture"
import Video from "../components/view/video"
import Divider from "../components/view/divider"
import Phone from "../components/view/phone"
import Inputfrom from "../components/view/inputfrom"
import Sex from "../components/view/sex"
import Birthday from "../components/view/birthday"
import Invitedate from "../components/view/invitedate"


export default {
    components: {
        Draggable, Header, Input, Select, Radio, Texts, Checkbox, Date, Edits,
        Link, Numbers, Textarea, Picture, Video, Inputfrom, Sex, Birthday, Phone, Divider, Invitedate
    },
    data () {
        return {
            /**
             *  组件名字 集合
             * group:0.展示类 1.填写类组件 2.联系人组件
             */
            moduleList: [
                { group: '0', type: 'text', component: 'Texts', title: '文本', icon: 'file-text', status: 0 },
                { group: '0', type: 'picture', component: 'Picture', title: '图片', icon: 'picture', status: 0 },
                { group: '0', type: 'link', component: 'Link', title: '链接', icon: 'disconnect', status: 0 },
                { group: '0', type: 'video', component: 'Video', title: '视频', icon: 'play-square', status: 0 },
                { group: '0', type: 'divider', component: 'Divider', title: '分割线', icon: 'minus', status: 0 },
                { group: '0', type: 'invitedate', component: 'Invitedate', title: '活动日期', icon: 'history', status: 1 },

                { group: '1', type: 'input', component: 'Input', title: '输入框', icon: 'border' },
                { group: '1', type: 'radio', component: 'Radio', title: '单选', icon: 'check-circle' },
                { group: '1', type: 'checkbox', component: 'Checkbox', title: '多选', icon: 'down-square' },
                { group: '1', type: 'select', component: 'Select', title: '下拉', icon: 'down' },
                { group: '1', type: 'date', component: 'Date', title: '日期时间', icon: 'dashboard' },
                // { group: '1', type: 'time', component: 'Time', title: '时间', icon: 'history' },
                { group: '1', type: 'number', component: 'Numbers', title: '数字', icon: 'number' },
                { group: '1', type: 'textarea', component: 'Textarea', title: '文本框', icon: 'profile' },


                { group: '2', type: 'phone', component: 'Phone', title: '手机', icon: 'mobile', status: 0 }, //status:0 未添加  1已添加 联系人组件只能添加一次
                { group: '2', type: 'name', component: 'Inputfrom', title: '姓名', icon: 'user', status: 0 },
                // { group: '2', type: 'inputfrom', component: 'Inputfrom', title: '电话', icon: 'phone',status:0 },
                // { group: '2', type: 'home', component: 'Inputfrom', title: '所在地', icon: 'home',status:0 },
                { group: '2', type: 'company', component: 'Inputfrom', title: '公司', icon: 'trademark', status: 0 },
                { group: '2', type: 'email', component: 'Inputfrom', title: '邮箱', icon: 'mail', status: 0 },
                { group: '2', type: 'job', component: 'Inputfrom', title: '职务', icon: 'desktop', status: 0 },
                { group: '2', type: 'qq', component: 'Inputfrom', title: 'QQ', icon: 'qq', status: 0 },
                { group: '2', type: 'address', component: 'Inputfrom', title: '地址', icon: 'tag', status: 0 },
                { group: '2', type: 'sex', component: 'Sex', title: '性别', icon: 'man', status: 0 },
                { group: '2', type: 'birthday', component: 'Birthday', title: '生日', icon: 'gift', status: 0 },
            ],
            /**
             *  页面展示组件 集合
             */
            viewArray: [
                {
                    type: "header",//显示的组件
                    title: "可编辑页面标题",//页面标题
                    logo: '',//表单logo
                    remarks: '这里是描述',//描述
                    onEdit: false,//是否可编辑
                    data: {},//数据
                    onOff: true,//是否显示
                    background: '',
                    prompt: '提交成功',//用户提交后显示的文字
                    style: {},//样式
                    maxLength: 10,//输入框最多输入字符
                    text: '',//文本类型需要
                    status: 1,//状态(1:正常 2:拖动中)
                    bgColor: '#666',//标题字体颜色
                },
            ],

            currentModule: null,//当前组件
            currentModuleTemp: null,//临时记录当前正在拖动的组件
            onClickModuleIndex: null,//当前选中组件的下标
            tempIndex: null,//临时记录选中组件的下标（作用1：表头设置tab==3切换为tab==2时，选中之前点击的组件,作用2：当没有点击组件时候，‘显示提示文字’）
            onClickModuleData: [],//当前选中组件的数据

            moveModuleIndex: null,//鼠标移入的组件下标

            activeKey: '1',//tabs标签页
        }
    },
    computed: {
        header () {
            return this.viewArray[0];
        },
    },
    methods: {
        tabsChange (val) {
            //标签页切换
            this.activeKey = val.toString();
            if (val == 1) {
                this.onClickModuleIndex = this.tempIndex;
            } else if (val == 2) {
                this.onClickModuleIndex = 0;
            }
        },
        clickTitle (cur) {
            //当前点击的组件
            // this.currentModule = cur;
        },
        dragStartTitle (e) {
            //当前拖动的组件
            this.currentModule = e.target.dataset.type;
            console.log(this.viewArray)
        },
        dragOverTitle (e) {
            if (!this.currentModule) {
                // 内容拖拽
                return;
            }
            e.preventDefault();//这行很重要☆ 不要这行会导致drop事件不触发
            e.stopPropagation();

            let className = e.target.className;
            let name = className !== 'view-content' ? 'view-mask' : 'view-content'
            // console.log(className);

            // 组件的默认数据
            const defaultData = {
                type: this.currentModule,    // 组件类型
                status: 2,          //默认状态
                data: [],           //基本数据
                title: null,        //标题
                onEdit: true,       //是否可编辑
                onFill: false,       //是否必填
                onOff: true,        //是否显示
                style: {},          //样式（描述样式）
                text: '',           //文本内容,超链接,图片显示文字
                maxLength: '16',    //输入框字符长度
                scope: [],           //数字范围
                src: null,             //图片地址
                href: null,            //图片连接 
                onPadding: true,       //是否有边距
                isSms: 0,              //是否发送短信验证码 0否1是
                // column: 2,          //一列显示几个（例：checkbox radio）
                value: null,           //用户输入的数据
                borderWidth: 1,         //分线粗细
                borderColor: '#bbb',    //分割线颜色
                timeDate: null,          //活动日期
            }
            if (this.currentModule == 'invitedate') {
                this.activityData = this.activityList.filter(d => d.id == this.activityId)[0];//活动数据
                // console.log(this.activityData.startTime + '至' + this.activityData.endTime)
                //活动时间
                // beginDate: this.activityData.startTime,//开始时间
                // endDate: this.activityData.endTime,//结束时间
                defaultData.timeDate = this.activityData.startTime.replace(/-/g, '.') + ' ~ ' + this.activityData.endTime.replace(/-/g, '.');
            }

            if (name == 'view-content') {
                //移动到释放框bom上
                if (!this.isPush) {
                    // this.onClickModuleIndex = this.viewArray.length;
                    this.isPush = true;
                    this.viewArray.push(defaultData);
                }
                // console.log('view-content.....................')
            } else if (name == 'view-mask') {
                //移动到组件上
                let target = e.target;
                let [y, h, curIndex] = [
                    e.offsetY,
                    target.offsetHeight,
                    Number(target.dataset.index),
                ];
                let direction = y < h / 2;//下方

                if (!this.isPush) {
                    console.log('未push', curIndex)
                    // Push to Top or Bottom
                    if (direction) {
                        if (curIndex == 0) {
                            this.viewArray.push(defaultData);
                        } else {
                            this.viewArray.splice(curIndex, 0, defaultData);
                        }
                        // console.log('上方', curIndex);
                    } else {
                        curIndex = curIndex + 1;
                        this.viewArray.splice(curIndex, 0, defaultData);
                        // console.log('下方', curIndex);
                    }
                    this.isPush = true;
                } else {
                    console.log('已经push')
                    // Moving
                    let result = null, i = 0;
                    // if (direction) {
                    //     //     console.log(this.viewArray);
                    //     curIndex == 0 ? curIndex = 0 : curIndex = curIndex - 1;
                    //     //     if (this.viewArray[i]) {
                    //     //         result = this.viewArray[i].status == 2;
                    //     //     } else {
                    //     //         result = true;
                    //     //     }
                    //     console.log('上方Moving');
                    // } else {
                    //     curIndex == 0 ? curIndex = 0 : curIndex = curIndex + 1;
                    //     //     i = +curIndex + 1;
                    //     //     if (this.viewArray[i]) {
                    //     //         result = this.viewArray.length > i && this.viewArray[i].status == 2;
                    //     //     } else {
                    //     //         result = true;
                    //     //     }
                    //     console.log('下方Moving');
                    // }

                    // if (curIndex > this.viewArray.length) return;
                    // let temp = this.viewArray[curIndex];
                    // this.viewArray.splice(curIndex, 1);
                    // console.log(temp)
                    // this.viewArray.splice(curIndex, 0, temp);
                }
                this.onClickModuleIndex = null;
                // this.currentModule = null;
                this.tempIndex = null;
                // this.clickModule (defaultData, curIndex);
                this.isPush = true;
            }
        },
        dragEndTitle () {
            this.isPush = false;

            //修改组件状态1：正常 2：移动中
            this.viewArray.forEach((item, index) => {
                item.status = 1;
            });
            //联系人组件每个表单只能添加一次  这里改变是否可拖动状态 0：可拖动 1：不能拖动
            this.moduleList.forEach((item, index) => {
                this.viewArray.forEach(view => {
                    if (view.type == item.type && item.type == this.currentModule && item.group == 2) {
                        item.status = 1;
                    }
                });
            });
            //拖拽完成置空当前正在拖拽的组件类型
            this.currentModule = null;
        },
        dragLeaveTitle (e) {
            // console.log('dragLeaveTitle离开')
            // e.preventDefault();
            // this.viewArray.forEach((item, index) => {
            //     if (item.status == 2) {
            //         this.viewArray.splice(index, 1);
            //     }
            // });
        },
        //已经拖动到指定位置
        dropBox (e) {
            console.log('已经拖动到指定位置');
            e.preventDefault();
            e.stopPropagation();
            this.dragEndTitle();
        },

        onDragTitle () {
            console.log('onDragTitle');
        },
        mouseMoveTitle () {
            console.log('mouseMove');
        },
        clickContent () {
            //点击任意地方取消选中的组件，tabs回到选择组件
            // this.resetData();
        },
        clickModule (data, index) {
            console.log(data)
            //点击组件的数据
            this.onClickModuleData = data;
            //点击组件的下标
            this.onClickModuleIndex = index;
            this.tempIndex = index;
            //点击组件的类型
            let componentsAttay = ['name', 'company', 'email', 'job', 'qq', 'address'];//公用一个编辑组件
            if (data.type == 'text') {
                this.currentModule = 'Texts';//Text是关键字，为组件名时不会显示，有问题
            } else if (data.type == 'number') {
                this.currentModule = 'Numbers';//Number是关键字，为组件名时不会显示，有问题
            } else if (componentsAttay.includes(data.type)) {
                this.currentModule = 'Inputfrom';
            } else {
                this.currentModule = data.type.charAt(0).toUpperCase() + data.type.slice(1);
            }
            //tabs标签页跳转到编辑栏
            this.activeKey = '1';

            console.log('点击的组件type:', this.currentModule)
        },
        deleteModule (index, type) {
            console.log(index, type)
            //删除组件
            this.viewArray.splice(index, 1);
            //改变组件是否可拖动状态 0：可拖动 1：不能拖动
            this.moduleList.forEach((item, index) => {
                if (item.type == type) {
                    item.status = 0;
                }
            });
            this.resetData();
        },

        viewTitleClick () {
            //点击表单头部进行编辑
            this.activeKey = '2';
            //选中表头 下标为0
            this.onClickModuleIndex = 0;
        },
        viewArrayChange (e) {
            console.log(e);
            this.resetData();
        },
        mousemoveModule (i) {
            this.moveModuleIndex = i;
        },
        mouseoutModule () {
            this.moveModuleIndex = null;
        },
        resetData () {
            //重置视图
            this.onClickModuleIndex = null;
            // this.onClickModuleData = {};
            this.tempIndex = null;
            this.activeKey = '1';
        },

    }
}